<script setup>
import {LoginStore} from "../stores";
import {reactive} from 'vue';
import {useRouter} from 'vue-router'
import {ElMessage} from "element-plus";

const store = LoginStore()
const router = useRouter()
const state = reactive({
  currentPath: '/',
})
const quit = () => {
  ElMessageBox.confirm(
      '是否要退出登录吗?',
      '退出登录',
      {
        confirmButtonText: '退出',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        store.$state.access_id = ''
        store.$state.access_username = ''
        store.$state.access_token = ''
        ElMessage.success('正在退出登录，请稍等')
        setInterval(()=>{
          router.push({path:'/login'})
        },2000)
      })
}
</script>

<template>
  <div class="xjt-home-view">
    <!--固定头-->
    <div class="home-header">
      <div class="header-inner">
        <div class="logo">
          <a href="//www.maoyan.com" class="logo" data-act="icon-click"></a>
        </div>
        <div class="nav">
          <el-menu
              class="el-menu-demo"
              mode="horizontal"
              @select="handleNavSelect"
              :router="true"
              :default-active='state.currentPath'
          >
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/films">电影</el-menu-item>
            <!--            <el-menu-item index="/cinemas">影院</el-menu-item>-->
            <!--            <el-menu-item index="/board">榜单</el-menu-item>-->
            <!--            <el-menu-item index="/news">热点</el-menu-item>-->
          </el-menu>
        </div>

        <div class="search-form">
          <el-input placeholder="请输入内容" v-model="inputSearchWord" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="handleInputSearch"></el-button>
          </el-input>
        </div>
        <div class="user-info">
          <div v-if="store.access_token">
            <el-dropdown>
              <a class="ant-dropdown-link">
                <el-avatar style="width: 50px;height: 50px"
                          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                          class="self-img"></el-avatar>
              </a>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <a @click="quit()">个人设置</a>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <a @click="quit()">退出</a>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span style="font-size: 20px"> {{ store.access_username }} </span>
          </div>
          <div class="login-register-btns" v-else>
            <el-button type="success" size="mini" @click="$router.push('/login')">登录</el-button>
            <el-button type="danger" size="mini" @click="$router.push('/register')">注册</el-button>
          </div>

          <el-dropdown @command="handleCommand" v-else>
            <div class="el-dropdown-link">
              <el-avatar slot="reference"
                        style="width: 50px; height: 50px;border-radius: 50%;border: 1px solid #ddd;line-height: 60px;"
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                        fit="fill">
              </el-avatar>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="orders"><i class="el-icon-setting"></i>我的订单</el-dropdown-item>
              <el-dropdown-item command="info"><i class="el-icon-setting"></i>基本信息</el-dropdown-item>
              <el-dropdown-item command="logout"><i class="el-icon-setting"></i>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.xjt-home-view {
  width: 100%;
  height: 100%;
  position: relative;
}

.home-header {
  width: 100%;
  height: 80px;
  border-bottom: 1px solid #dddddd;
}

.header-inner {
  width: 80%;
  margin: 0 auto;
  display: flex;
}

.logo {
  width: 133px;
  height: 80px;
  background: url() no-repeat 0;
  background-size: contain;
}

.nav {
  flex: 2;
  margin-left: 30px;
}

.el-menu-item {
  height: 80px;
  line-height: 80px;
  font-size: 18px;
}

.el-menu-item.is-active {
  color: grey;
  background-color: #ef4238;
  border-bottom: 0;
}

.search-form {
  height: 80px;
  line-height: 80px;
  flex: 1;
  margin-left: 30px;
  position: relative;
}

.user-info {
  width: 180px;
  position: relative;
  margin-left: 30px;
  z-index: 9999;
  height: 80px;
  line-height: 80px;
  align-items: center;
  margin-top: 15px;
}

</style>